<template>
    <view class="content">
        <a-demo title="基础使用">
            <view class="row">
                <pure-amount :amount="amount1"></pure-amount>
            </view>
        </a-demo>

        <a-demo title="货币符号" desc="不显示货币符号将属性值这是为空">
            <view class="row">
                <pure-amount :amount="amount1" currency="$"></pure-amount>
            </view>
            <view class="row">
                <pure-amount :amount="amount1" currency="€"></pure-amount>
            </view>
            <view class="row">
                <pure-amount :amount="amount1" currency=""></pure-amount>
            </view>
        </a-demo>

        <a-demo title="小数精度" desc="默认两位小数">
            <view class="row">
                <pure-amount :amount="amount2"></pure-amount>
            </view>
            <view class="row">
                <pure-amount :amount="amount2" :precision="3"></pure-amount>
            </view>
            <view class="row">
                <pure-amount :amount="amount2" :precision="4"></pure-amount>
            </view>
        </a-demo>

        <a-demo title="补充精度" desc="精度不够时填充0">
            <view class="row">
                <pure-amount :amount="amount3" padZero></pure-amount>
            </view>
            <view class="row">
                <pure-amount :amount="amount3" :precision="3" padZero></pure-amount>
            </view>
            <view class="row">
                <pure-amount :amount="amount3" :precision="4" padZero></pure-amount>
            </view>
        </a-demo>

        <a-demo title="丢弃末尾的0" desc="此属性优先级高于补充精度">
            <view class="row">
                <text>默认数据：</text>
                <pure-amount :amount="amount4" :precision="4"></pure-amount>
            </view>
            <view class="row">
                <text>丢弃末尾的0后的数据：</text>
                <pure-amount :amount="amount4" dropZero></pure-amount>
            </view>
        </a-demo>

        <a-demo title="千分位" desc="默认显示">
            <view class="row">
                <text>默认显示：</text>
                <pure-amount :amount="amount5"></pure-amount>
            </view>
            <view class="row">
                <text>设置为不显示：</text>
                <pure-amount :amount="amount5" :thousands="false"></pure-amount>
            </view>
        </a-demo>
    </view>
</template>

<script setup>
    import { ref } from "vue";

    const amount1 = ref(8.99);
    const amount2 = ref(8.9999);
    const amount3 = ref(8.8);
    const amount4 = ref("8.8000");
    const amount5 = ref(8600);
</script>

<style scoped>
    .row {
        box-sizing: border-box;
        padding: 15px;
        background: var(--pure-background-element);
        margin: 10px 0;
        border-radius: 4px;
        color: #ff4246;
        font-size: 18px;
        font-weight: 600;
    }
</style>
